[ElementTiming] Add intrinsic size This CL adds naturalWidth and naturalHeight members to PerformanceElementTiming to allow developers to compute a size that aligns more with the importance of the image with the help of these attributes and intersectionRect. This CL also adds tests for CSS scaling and rotation. Bug: 879270 Change-Id: I9dbbe802dd430c2dd0fd9a476608c0c744a98095 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1545169 Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#646368} diff --git a/element-timing/rectangular-image.html b/element-timing/rectangular-image.html new file mode 100644 index 0000000..9903d47 --- /dev/null +++ b/element-timing/rectangular-image.html
@@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: observe a rectangular image</title> +<body> +<style> +body { + margin: 20px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + let beforeRender; + async_test(function (t) { + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const index = window.location.href.lastIndexOf('/'); + // Subtracting 14 to remove 'element-timing'. + const pathname = window.location.href.substring(0, index - 14) + + 'images/black-rectangle.png'; + checkElement(entry, pathname, 'my_image', beforeRender); + // Assume viewport has size at least 100, so the element is fully visible. + checkRect(entry, [20, 120, 20, 70]); + checkNaturalSize(entry, 100, 50); + }) + ); + observer.observe({entryTypes: ['element']}); + // We add the image during onload to be sure that the observer is registered + // in time for it to observe the element timing. + window.onload = () => { + // Add image of width equal to 100 and height equal to 50. + const img = document.createElement('img'); + img.src = '/images/black-rectangle.png'; + img.setAttribute('elementtiming', 'my_image'); + document.body.appendChild(img); + beforeRender = performance.now(); + }; + }, 'Element with rectangular image has correct rect and instrinsic size.'); +</script> +</body> 